<%@page import="com.adisi.objetos.PerfilManager"%>
<%@	page import ="java.util.ArrayList" %>
<%@	page import ="java.util.Iterator" %>
<%@	page import ="java.util.List" %>
<%@	page import ="com.adisi.objetos.Usuario" %>
<%@	page import ="com.adisi.objetos.TipoDocumento" %>
<%@	page import ="com.adisi.objetos.Perfil" %>
<%@	page import ="com.adisi.objetos.UsuarioManager" %>


<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<jsp:directive.include file="headerComun.jsp" />
<body>
<%
	PerfilManager pm = new PerfilManager();

	Perfil perfil = (Perfil)request.getAttribute("perfil");

	ArrayList<Usuario> usuarios = (ArrayList<Usuario>)request.getAttribute("usuarios");
	
	ArrayList<Usuario> usuariosAsignados = (ArrayList<Usuario>)request.getAttribute("usuarios_asignados");
	
%>	
<div class="container">
	<jsp:directive.include file="menuNavegacion.jsp" />
	<div class="row">
		<div class="col-md-8">
				<h2>Asignaci&oacute;n de usuarios</h2>
		</div>
	</div>
	<div class="col-md-10 column col-md-offset-1">
		<script>
			$(document).ready(function(){
				$('#btnAsignar').click(function(){
					return !$('#usuarios option:selected').remove().appendTo('#usuarios_asignados');
				});
				$('#btnDesasignar').click(function(){
					
					return !$('#usuarios_asignados option:selected').remove().appendTo('#usuarios');
				});
				$("#btnGrabar").on('click',function(){
					$('#usuarios_asignados option').prop('selected', true);
				});
				
			});
		</script>	
		<form role="form" action="perfil" method="post" name="formulario" id="formulario">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">
						Perfil <%=perfil.getNombrePerfil() %>
						<small><%=perfil.getDetallePerfil() %></small>
					</h3>
				</div>
				<div class="panel-body">		
					<div class="row">
						<div class="col-md-12">
						
							<div class="form-group" style="display:hidden">
								<input type="hidden" id="perfil_id" name="perfil_id" value="<%=perfil.getIdPerfil()%>">
								<input type="hidden" id="perfil_accion" name="perfil_accion" value="asignarUsuarios">
							</div>
							<div class="row">
								<div class="col-md-5">
									<div class="form-group">
										<label for="perfiles">Usuarios</label>
										<select size="8" name="usuarios" id="usuarios" class="form-control" multiple="multiple">
								<%
											for(int i = 0; i < usuarios.size(); i++) {												
										%>
												<option value="<%= usuarios.get(i).getIdUsuario() %>" title="<%=usuarios.get(i).getApellido()%>, <%=usuarios.get(i).getNombre()%>"><%=usuarios.get(i).getNick()%></option>
										<%
											}
										%>
										</select>
									</div>											
								</div>
								<div class="col-md-2">
									<div style="height=340px;">&nbsp;</div>
									<div class="btn-group btn-group-justified">
										<button type="button" class="btn btn-default glyphicon glyphicon-forward" title="Asignar" id="btnAsignar"></button>
									</div>
									<div style="height=50px;">&nbsp;</div>
									<div class="btn-group btn-group-justified">
										<button type="button" class="btn btn-default glyphicon glyphicon-backward " title="Desasignar" id="btnDesasignar"></button>
									</div>
								</div>
								<div class="col-md-5">
									<div class="form-group">
										<label for="perfiles">Usuarios asignados</label>
							
										<select size="8" name="usuarios_asignados" id="usuarios_asignados" class="form-control" multiple="multiple">
							<%
								for(int i = 0; i < usuariosAsignados.size(); i++) {
							%>
													<option value="<%=usuariosAsignados.get(i).getIdUsuario()%>" title="<%=usuariosAsignados.get(i).getApellido()%>, <%=usuariosAsignados.get(i).getNombre()%>"><%=usuariosAsignados.get(i).getNick()%></option>
										<%		
												}
										%>
										</select>
									</div>											
								
								</div>
							</div>
				
						</div>	
			
					</div>
				</div>
				<div class="panel-footer text-right">
					<button type="submit" class="btn btn-primary glyphicon glyphicon-floppy-save" id="btnGrabar"> Grabar</button>
						
					<a  href="perfil?lst" type="cancel" class="btn btn-warning glyphicon glyphicon-ban-circle"> Cancelar</a>
				</div>
			</div>
		</form>
	</div>		
		
		
</div>

</body>
</html>